<template>
  <div @click.stop class="subMenus">
    <!--笔记详情操作-->
    <el-popover
      placement="bottom-start"
      :width="100"
      style="margin: 0; padding: 0"
      trigger="click"
    >
      <template #reference>
        <font-awesome-icon
          style="outline: 0; cursor: pointer"
          :icon="['fas', 'ellipsis']"
        />
      </template>
      <div style="max-height: 200px; overflow-y: auto; padding: 10px 0px">
        <el-row @click.stop="handleDelete" class="sub-item">
          <el-col :span="24">删除</el-col>
        </el-row>
        <el-row @click.stop="handleLike" class="sub-item">
          <el-col :span="24">{{ row.favoritesFlag ? "取消" : "" }}收藏</el-col>
        </el-row>
        <el-row class="sub-item">
          <el-popover
            placement="right-start"
            :width="120"
            style="margin: 0; padding: 0"
            trigger="hover"
          >
            <template #reference>
              <el-col :span="24">
                <span>移动到</span>
              </el-col>
            </template>
            <div  style="max-height: 500px; width: 100%; overflow-y: auto; padding: 10px 0px">
              <ul>
                <li
                  @click.stop="handleMove(item.configId)"
                  class="sub-item ellipsis"
                  v-for="(item, index) in menuList.filter((x) => x.configId)"
                  :key="index"
                >
                  {{ item.configName }}
                </li>
              </ul>
            </div>
          </el-popover>
        </el-row>
        <el-row
          v-if="configIndex > 1"
          @click.stop="handleRemove"
          class="sub-item"
        >
          <el-col :span="24">从该组移除</el-col>
        </el-row>
      </div>
    </el-popover>
  </div>
</template>
  
  <script lang="ts">
import {
  defineComponent,
  onBeforeMount,
  reactive,
  toRefs,
  ref,
  onMounted,
  getCurrentInstance,
  toRaw,
  nextTick,
} from "vue";
import dayjs from "dayjs";
import { ElMessage,ElMessageBox } from "element-plus";
import { deleteNote, addFavorites } from "@/api/home";
import { moveMenu, removeNote } from "@/api/menu";

export default defineComponent({
  props: {
    // 双向绑定
    menuList: {
      type: Array,
      default: () => [],
    },
    // 双向绑定
    row: {
      type: Object,
      default: () => {
        return [];
      },
    },
    // 双向绑定
    configIndex: {
      type: Number,
      default: () => {
        return 0;
      },
    },
    getList: {
      type: Function,
      default: () => {},
    },
  },
  setup(props, { emit }) {
    const state = reactive({
      loading: false,
    });

    const { proxy } = getCurrentInstance() as any;

    const handleDelete = () => {
      ElMessageBox.confirm("确认要删除", {
        confirmButtonText: "是",
        cancelButtonText: "否",
        type: "warning",
      })
        .then(async () => {
          state.loading = true;
          let res = await deleteNote(toRaw(props.row));
          state.loading = false;
          if (res.status == 0) {
            props.getList(props.menuList[props.configIndex], props.configIndex);
          } else {
            ElMessage.error(res.message);
          }
        })
        .catch(() => {});
    };

    const handleLike = async () => {
      //debugger;
      const parmas = {
        ...props.row,
        ...{
          favoritesFlag: !props.row.favoritesFlag,
        },
      };
      let res = await addFavorites(parmas);
      if (res.status == 0) {
        ElMessage.success("操作成功~");
        props.getList(props.menuList[props.configIndex], props.configIndex);
      } else {
        ElMessage.error(res.message);
      }
    };

    const handleMove = async (configId) => {
      //debugger;
      const parmas = {
        noteId: props.row.noteId,
        menuId: configId,
      };
      let res = await moveMenu(parmas);
      if (res.status == 0) {
        ElMessage.success("移动完成啦~");
      } else {
        ElMessage.error(res.message);
      }
    };

    const handleRemove = async () => {
      const parmas = {
        noteId: props.row.noteId,
        menuId: props.menuList[props.configIndex].configId,
      };
      let res = await removeNote(parmas);
      if (res.status == 0) {
        ElMessage.success("移除成功~");
        props.getList(props.menuList[props.configIndex], props.configIndex);
      } else {
        ElMessage.error(res.message);
      }
    };

    return {
      ...toRefs(state),
      handleDelete,
      handleLike,
      handleMove,
      handleRemove,
    };
  },
});
</script>
  
<style>
.el-popper {
  min-width: 100px !important;
}

.el-popover.el-popper {
  padding: 0;
}
</style>
  